<template>
    <div>
      <headeBar></headeBar>
      <div class="container">
        <el-container>
          <sidebar :activeIndex="activeIndex"></sidebar>
          <el-main class="container-content">
            <el-row>
              <el-col :span="2"><el-button type="primary" round @click="addUser"><i class="el-icon-circle-plus-outline" style="font-size: 15px"></i><span>添加</span></el-button></el-col>
            </el-row>
            <el-table :data="userList" border :row-class-name="tableRowClass" height="430" style="width: 100%; margin-top:10px;" >
              <el-table-column prop="code" label="工号" align="center"/>
              <el-table-column prop="username" align="center"  label="姓名" />
              <el-table-column prop="isAdmin" align="center" label="是否是管理员" />
              <el-table-column prop="isActive" align="center" label="状态" />
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button @click="resetPassword(scope)" type="text" size="middle">重置密码</el-button>
                  <el-button @click="editUser(scope)" type="text" size="middle">修改</el-button>
                  <el-button @click="delUser(scope)" type="text" size="middle">删除</el-button>
                </template>
              </el-table-column>
            </el-table>

            <!--添加用户模态框-->
            <el-dialog title="添加用户" :visible.sync="addUserDialogVisible" >
              <el-form  :model="addForm" status-icon ref="addForm">
                <el-form-item label="工号" label-width="120px" >
                  <el-input  v-model="addForm.code"  autocomplete="off" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="姓名" label-width="120px" >
                  <el-input  v-model="addForm.username"  autocomplete="off" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="是否是管理员" label-width="120px" >
                  <el-switch  v-model="addForm.is_admin" ></el-switch>
                </el-form-item>
                <el-form-item label="密码" label-width="120px" >
                  <el-input type="password" v-model="addForm.password"  autocomplete="off" style="width: 200px"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="addUserDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="postUser">确 定</el-button>
              </div>
            </el-dialog>

            <!--修改用户模态框-->
            <el-dialog title="修改用户" :visible.sync="editUserDialogVisible" >
              <el-form  :model="editForm" status-icon ref="editForm">
                <el-form-item label="工号" label-width="120px" >
                  <el-input  v-model="editForm.code"  autocomplete="off" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="姓名" label-width="120px" >
                  <el-input  v-model="editForm.username"  autocomplete="off" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="是否是管理员" label-width="120px" >
                  <el-switch  v-model="editForm.is_admin" ></el-switch>
                </el-form-item>
                <el-form-item label="是否启用" label-width="120px" >
                  <el-switch  v-model="editForm.is_active" ></el-switch>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="editUserDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="putUser">确 定</el-button>
              </div>
            </el-dialog>


            <!--重置密码模态框-->
            <el-dialog :title=resetPasswordTitle :visible.sync="resetPasswordDialogVisible" >
              <el-form  :model="passwordForm" status-icon ref="passwordForm">
                <el-form-item label="密码" label-width="120px" >
                  <el-input type="password" v-model="passwordForm.password"  autocomplete="off" style="width: 200px"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="resetPasswordDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="putNewPassword">确 定</el-button>
              </div>
            </el-dialog>


          </el-main>

        </el-container>



      </div>


    </div>
</template>

<script src="./usermanage.js">

</script>

